<template>
  <div class>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-if="system_4" @click="getedit(scope.row)">编辑</el-button>
          <el-button type="text" v-if="system_5" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="fenyecont">
        <el-pagination
            background
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total,prev, sizes, pager, next, jumper"
              :total="totle"
              @size-change="handleSizeChange"
            @current-change="fenyeBtn"
          />
    </div>
   
    <el-dialog title="编辑指引" :visible.sync="guideDialog" width="50%" @close="closeDialog()">
      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInfo.title" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor
            ref="text"
            v-model="formInfo.content"
            class="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="formInfo.sort"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="guideDialog=false">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { help, helpEdit, helpDelete,lists } from "@/api/user";
import Base64 from "@/utils/base";
import { getp_id } from "@/utils/getmenuid";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      tableData: "",
      guideDialog: false,
      formInfo: "",
      totle: "",
      page: 1,
      totle:10,
      num:10,
      btnarr:"",
      system_4:false,
      system_5:false
    };
  },
  components: {
    quillEditor
  },
  created() {
    this.getlists();
    setTimeout(()=>{
    this.gethelp();
    },500)
  },
  methods: {
    getlists() {
      lists({
        request_data: Base64.encode(JSON.stringify({ pid: getp_id() }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        // console.log(res);
        let btnarr = [];
        res.result.map(v => {
          btnarr.push(v.class_mark);
        });
        btnarr.forEach(item => {
          // console.log(item);
          if (item == "system_4") {
            this.system_4 = true;
          }
          if (item == "system_5") {
            this.system_5 = true;
          }
        });
      });
    },
    handleSizeChange(val){
      this.num = val
      this.gethelp(this.page,this.num)
    },
    //分页
    fenyeBtn(e) {
      this.page = e
      this.gethelp(this.page,this.num)
    },
    // fetchData(page,num){
    //   let parmes = {
    //     page: page||this.page,
    //     limit: num||this.num,
    //     id: getp_id()
    //   }
    //   help({request_data: Base64.encode(JSON.stringify(parmes))}).then(res => {
    //     console.log(res.result.data);
    //     this.tableData = res.result.data;
    //     this.totle = res.result.count
    //   });
    // },
    gethelp(page,num) {
      let parmes = {
        page: page||this.page,
        limit: num||this.num,
        id: getp_id()
      }
      help({ request_data: Base64.encode(JSON.stringify(parmes))}).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.tableData = res.result.data;
        this.totle = res.result.count
      });
    },
    //帮助管理列表 -- 修改
    getedit(row) {
      this.guideDialog = true;
      this.formInfo = JSON.parse(JSON.stringify(row));
      this.formInfo.content = decodeURIComponent(row.content)
      this.formInfo.title = decodeURIComponent(row.title)
    },
    //帮助管理列表 -- 删除
    del(row){
      this.$confirm("确定删除此条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
         helpDelete(
        { request_data: Base64.encode(JSON.stringify({ id: row.id })) },
      ).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.gethelp()
      });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        })
    },
    submitForm() {
      let parmes = {
            id: this.formInfo.id,
            title: encodeURIComponent(this.formInfo.title),
            content: encodeURIComponent(this.formInfo.content),
            sort: this.formInfo.sort
      }
      helpEdit(
        {
          request_data: Base64.encode(JSON.stringify(parmes))
        },
      ).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.guideDialog = false;
        this.gethelp();
      })
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding-left: 20px;
}
.fenyecont{
  text-align: center;
  margin-top: 20px;
}

.ql-editor{
  height: 400px;
}
</style>
